import CustomInput from '@/components/antd-comp/input/CustomInput'
import { showMessage } from '@/components/antd-comp/message'
import CustomSelect from '@/components/antd-comp/select/CustomSelect'
import {
  CommmonSmallJudgmentCommon,
  CommonSmallErrorTitle,
} from '@/pages/workflow/components/CommonSmallTemp'
import { INPUT_CONSTRAINTS } from '@/pages/workflow/components/InspectData'
import { variableSourceTypeOptions } from '@/pages/workflow/constants'
import { useSourceOptions } from '@/pages/workflow/hooks/use-source-options'
import { useEffect, useState } from 'react'

export default function InputCont({ info, sourceOptions, editData }) {
  const [optionList, setOptionList] = useState([])
  const { options } = useSourceOptions(info)

  useEffect(() => {
    if (Array.isArray(info.inputList) && info.inputList.length > 0) {
      const newList = info.inputList.map(item => ({
        ...item,
        value: item.value ? item.value : undefined
      }))
      setOptionList(newList)
    } else {
      setOptionList([])
    }
  }, [info.inputList])

  return (
    <div className="flexCol InputCont_case">
      <div className="flexRowStart columns-title--dGaYetSzjjUdXN_u9_8J">
        <div className="input-head" style={{ width: '140px' }}>
          参数名称
        </div>
        <div className="input-head w-[calc((92%-140px)*0.4)]">参数来源</div>
        <div className="input-head w-[calc((92%-140px)*0.4)]">参数值</div>
      </div>
      {optionList.map((item, i) => (
        <div key={i} className="flexRowStart flexRowJustBet InputCont_marTop">
          <div className="flexRowStart flexRowJustBet w-[92%]">
            <div className="w-[140px]">
              <CustomInput
                onChange={e => {
                  const newValue = e.target.value
                  if (
                    newValue.length <= INPUT_CONSTRAINTS.NAME_MAX_LENGTH &&
                    (newValue === '' || /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(newValue))
                  ) {
                    const newList = optionList.map((obj, index) => {
                      if (index === i) {
                        return { ...obj, variable: newValue }
                      }
                      return obj
                    })
                    setOptionList(newList)
                    editData({
                      inputList: newList
                    })
                  }
                }}
                placeholder="输入参数名称"
                value={item.variable}
              />
            </div>
            <div className="inputCont_end" style={{ width: 'calc(100% - 140px)' }}>
              <CustomSelect
                className="w-[40%]"
                onChange={e => {
                  const newList = optionList.map((obj, index) => {
                    if (index === i) {
                      return { ...obj, type: e, value: undefined, value_selector: undefined }
                    }
                    return obj
                  })
                  setOptionList(newList)
                  editData({
                    inputList: newList
                  })
                }}
                value={item.type}
                disabled
                options={variableSourceTypeOptions}
                placeholder="参数来源"
              />
              <CommmonSmallJudgmentCommon
                item={item}
                optionList={optionList}
                options={options}
                i={i}
                Change={newList => {
                  setOptionList(newList)
                  editData({
                    inputList: newList
                  })
                }}
              />
            </div>
          </div>
        </div>
      ))}
      <CommonSmallErrorTitle
        optionList={optionList}
        noneList={['value', 'variable', 'type']}
        repeat={'variable'}
      />
    </div>
  )
}